<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的博客</title>
        <link rel="stylesheet" href="../css/index.css" />
        <!-- <link rel="stylesheet" href="../css/轮播图.css"> -->
        <link rel="stylesheet" href="../img/font_lglin0de7sp/iconfont.css">
    </head>
    <body>
        <!-- 标题 -->
        <div class="blogname clearfix">
            <p>我的博客</p>
            <input type="text" name="" id="" placeholder="输入要查找的内容">
        </div>
         <!-- 导航栏 -->
        <div class="nav">
            <div class="nav-con">
                <ul class="nav1">
                    <li class="shownav1"><a href="#">首页</a>
                        <ul class="nav2">
                            <li class="shownav2"><a href="#">二级菜单1</a>
                                <ul class="nav3">
                                    <li><a href="#">三级菜单1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">收藏</a></li>
                    <li><a href="#">我的资料</a></li>
                    <li><a href="#">设置</a></li>
                    <li><a href="#">详情</a></li>
                </ul>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="contain">
            <div class="carousel">
                <div class="slide clearfix">
                    <div class="img-sb sl" index="4">
                        <img src="../img/随笔.jpg" alt="">
                        <div class="cover" style="background-color: rgba(255, 255, 255, 0.3);"></div>
                        <h1>简单随笔</h1>
                        <p>let's go!</p>
                    </div>
                    <div class="img-qd sl" index="1">
                        <img src="../img/前端.jpg" alt="">
                        <div class="cover" style="background-color: rgba(255, 255, 255, 0.3);"></div>
                        <h1>前端学习</h1>
                        <p>let's go!</p>
                    </div>
                    <div class="img-sw sl" index="2">
                        <img src="../img/食物.jpg" alt="">
                        <div class="cover" style="background-color: rgba(255, 255, 255, 0.3);"></div>
                        <h1>菜谱收集</h1>
                        <p>let's go!</p>
                    </div>
                    <div class="img-xxzl sl" index="3">
                        <img src="../img/学习资料.jpg" alt="">
                        <div class="cover" style="background-color: rgba(255, 255, 255, 0.3);"></div>
                        <h1>学习资料</h1>
                        <p>let's go!</p>
                    </div>
                    <div class="img-sb sl" index="4">
                        <img src="../img/随笔.jpg" alt="">
                        <div class="cover" style="background-color: rgba(255, 255, 255, 0.3);"></div>
                        <h1>简单随笔</h1>
                        <p>let's go!</p>
                    </div>
                    <div class="img-qd sl" index="1">
                        <img src="../img/前端.jpg" alt="">
                        <div class="cover" style="background-color: rgba(255, 255, 255, 0.3);"></div>
                        <h1>前端学习</h1>
                        <p>let's go!</p>
                    </div>
                </div>
            </div>
            <div class="but">
                <button class="left btn">&lt;</button>
                <button class="right btn">&gt;</button>
            </div>
            <ul class="indicator">
                <li class="li-active" style='background-color:#666;'></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

       
        <!-- 主要内容 -->
        <div class="contain2">
            <div class="main">
                <div class="main-nav">
                    <li>前端学习</li>
                    <span class="line">|</span>
                    <li>菜谱收集</li>
                    <span class="line">|</span>
                    <li>学习资料</li>
                    <span class="line">|</span>
                    <li>简单随笔</li>
                </div>
                <div class="main-con">
                    <!-- 大框 -->
                    <div class="con1 wrap">
                         <!-- 大框中一条小筐 -->
                        <div class="wrap-con1 clearfix">
                            <a href="###"><img src="../img/前端.jpg" alt=""></a>
                            <div class="wrap-con2 clearfix">
                                <a href="###">html语义化标签</a>
                                <p>一些常用语义化标签</p>
                                <div class="wrap-con3">
                                    <span class="time">Apr 8 2020</span>
                                    <span class="visited">已有<span class="number"></span>人浏览</span>
                                    <span class="tagname">html</span>
                                </div>
                            </div>
                        </div>

                        <div class="wrap-con1 clearfix">
                            <a href="###"><img src="../img/前端.jpg" alt=""></a>
                            <div class="wrap-con2">
                                <a href="###">html语义化标签</a>
                                <p>一些常用语义化标签</p>
                                <div class="wrap-con3">
                                    <span class="time">Apr 8 2020</span>
                                    <span class="visited">已有<span class="number"></span>人浏览</span>
                                    <span class="tagname">html</span>
                                </div>
                            </div>
                        </div>

                        <div class="wrap-con1 clearfix">
                            <a href="###"><img src="../img/前端.jpg" alt=""></a>
                            <div class="wrap-con2">
                                <a href="###">html语义化标签</a>
                                <p>一些常用语义化标签</p>
                                <div class="wrap-con3">
                                    <span class="time">Apr 8 2020</span>
                                    <span class="visited">已有<span class="number"></span>人浏览</span>
                                    <span class="tagname">html</span>
                                </div>
                            </div>
                        </div>

                        <div class="wrap-con1 clearfix">
                            <a href="###"><img src="../img/前端.jpg" alt=""></a>
                            <div class="wrap-con2">
                                <a href="###">html语义化标签</a>
                                <p>一些常用语义化标签</p>
                                <div class="wrap-con3">
                                    <span class="time">Apr 8 2020</span>
                                    <span class="visited">已有<span class="number"></span>人浏览</span>
                                    <span class="tagname">html</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="con2 wrap">
                        <div class="wrap-con1 clearfix">
                            <a href="###"><img src="../img/食物.jpg" alt=""></a>
                            <div class="wrap-con2">
                                <a href="###">html语义化标签</a>
                                <p>一些常用语义化标签</p>
                                <div class="wrap-con3">
                                    <span class="time">Apr 8 2020</span>
                                    <span class="visited">已有<span class="number"></span>人浏览</span>
                                    <span class="tagname">html</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="con3 wrap">
                        <div class="wrap-con1 clearfix">
                            <a href="###"><img src="../img/学习资料.jpg" alt=""></a>
                            <div class="wrap-con2">
                                <a href="###">html语义化标签</a>
                                <p>一些常用语义化标签</p>
                                <div class="wrap-con3">
                                    <span class="time">Apr 8 2020</span>
                                    <span class="visited">已有<span class="number"></span>人浏览</span>
                                    <span class="tagname">html</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="con4 wrap">
                        <div class="wrap-con1 clearfix">
                            <a href="###"><img src="../img/随笔.jpg" alt=""></a>
                            <div class="wrap-con2">
                                <a href="###">html语义化标签</a>
                                <p>一些常用语义化标签</p>
                                <div class="wrap-con3">
                                    <span class="time">Apr 8 2020</span>
                                    <span class="visited">已有<span class="number"></span>人浏览</span>
                                    <span class="tagname">html</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 留言板 -->
                    <div class="communicate">
                        <label class="yourname">
                            <span>Your Name :</span>
                            <input id="name" type="text" name="name" placeholder="Your Full Name" />
                        </label>
                        <label class="message">
                            <span>Message :</span>
                            <textarea id="message" name="message" placeholder="Your Message to Us" cols="55" rows="5"></textarea>
                        </label>
                        <button>Send</button>
                        <ul></ul>
                    </div>

                </div>
            </div>
            <div class="aside">
                <div class="person aside-con">
                    <div class="aside-con-title">个人</div>
                    <div class="aside-con2 clearfix">
                        <img src="../img/yonghufangkeshu.png" alt="">
                        <div class="aside-con3">
                            <h4>Hello</p>
                            <p></p>
                            <button>关注</button>
                            <i></i>
                        </div>
                    </div>
                </div>

                <div class="tag aside-con">
                    <div class="aside-con-title">标签</div>
                    <div class="aside-con2 clearfix">
                        <ul>
                            <li><a href="###">html</a></li>
                            <li><a href="###">css</a></li>
                            <li><a href="###">js</a></li>
                            <li><a href="###">VUE</a></li>
                            <li><a href="###">高等数学</a></li>
                            <li><a href="###">大学物理</a></li>
                            <li><a href="###">离散数学</a></li>
                        </ul>
                    </div>
                </div>

                <div class="link aside-con">
                    <div class="aside-con-title">友链</div>
                    <div class="aside-con2 clearfix">
                        <ul>
                            <li><a href="###">广告位招租1</a></li>
                            <li><a href="###">广告位招租2</a></li>
                            <li><a href="###">广告位招租3</a></li>
                            <li><a href="###">广告位招租4</a></li>
                            <li><a href="###">广告位招租5</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        
        <!-- 侧边 -->
        <div class="sidebar"><img src="../img/zhiding.png" alt=""></div>
        
        <!-- <script src="../js/轮播图.js"></script> -->
        <script src="../js/index.js"></script>
        <script src="../img/font_lglin0de7sp/iconfont.js"></script>
    </body>
</html>
 